<script setup lang="ts">
  import { type, rightDialogShow, dataTree, unitType } from '@/components/LeftTree';
  // import leftTree from './components/leftTree/index.vue';
  import rightTable from './components/rightTable/index.vue';

  const container = ref<HTMLElement | null>(null);
  const data = reactive<any>({
    dataId: {},
    regionId: 0,
    update: 0,
    selected: null,
  });
  interface widthType {
    width: number;
  }
  const widthData: widthType = reactive({
    width: 300,
  });
  const regionCode = ref<string>('');
  onMounted(async () => {
    updateWidth();
  });
  /** 树形组件传值过来的数据 */
  const sendGrandson = async (value) => {
    data.dataId = value;
  };
  const sendUnitData = async (value) => {
    data.regionId = value;
  };
  const sendUpTreeData = async (value) => {
    data.update = value.numberValue;
    if (typeof value.id == 'object') {
      data.selected = value.id;
    } else {
      //   console.log(data.selected, 'selected');
      data.selected = value.id;
    }
  };
  provide('sendHandle', sendGrandson);
  provide('container', container);
  provide('sendUnit', sendUnitData);
  provide('sendUpTree', sendUpTreeData);
  const updateDialogShow = (val: boolean) => {
    rightDialogShow.value = val;
  };
  const nameValueChange = (val: string) => {
    regionCode.value = val;
  };
  const updateWidth = () => {
    let resize = document.getElementById('asideId') as HTMLElement;
    resize.onmousedown = function (e) {
      // resize.style.background = '#818181';
      let startX = e.clientX;
      // resize.left = resize.offsetLeft;
      document.onmousemove = function (e) {
        let endX = e.clientX;
        let moveLen = endX - startX;
        startX = endX;
        widthData.width += moveLen;
      };
      document.onmouseup = function () {
        // 颜色恢复
        resize.style.background = '';
        document.onmousemove = null;
        document.onmouseup = null;
      };
      return false;
    };
  };
</script>

<template>
  <div class="common-layout">
    <ElContainer style="height: 100%">
      <div
        ref="container"
        class="common-layout-left"
        id="asideId"
        :style="{ width: widthData.width + 'px' }"
      >
        <ElAside> <LeftTree :data="data" @update:nameValue="nameValueChange" /> </ElAside>
      </div>
      <ElMain class="common-layout-right">
        <rightTable :data="data" :regionCode="regionCode" />
      </ElMain>
    </ElContainer>
  </div>
  <ElementDialogAdd
    :type="type"
    :data="data"
    :dataTree="dataTree"
    :show="rightDialogShow"
    :regionId="data.regionId"
    :unitType="unitType"
    @update:value="updateDialogShow"
  />
</template>

<style lang="scss" scoped>
  .common-layout {
    height: $height;
    &-right {
      padding: 0;
    }
    &-left {
      height: $height;
      width: 300px;
    }
    :deep(.el-aside) {
      height: $height;
      width: $width;
      overflow: visible;
    }
  }
</style>
